<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>统计页</title>
    <link href="../static/css/bootstrap.min.css" rel="stylesheet">
    <link href="../static/css/datepicker3.css" rel="stylesheet">
    <link href="../static/css/styles.css" rel="stylesheet">
    <style>
        .easypiechart {
            height: 60px;
        }

        .easypiechart .percent {
            top: 0px;
        }
        .boxDiv{
            border-radius: 20px;
        }
        .boxDiv:hover{
            -webkit-animation: scaleDraw 2s ease-in-out infinite;
        }
        @keyframes scaleDraw {  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
            0%{
                transform: scale(1);  /*开始为原始大小*/
            }
            25%{
                transform: scale(1.1); /*放大1.1倍*/
            }
            50%{
                transform: scale(1);
            }
            75%{
                transform: scale(1.1);
            }
        }

    </style>
</head>

<body style="padding: 10px;overflow-x: hidden">
<div>

    <!--整体数据总览统计-->
    <div class="row" style="padding-top:15px;padding-bottom: 15px;">
        <div class="col-lg-12">
            <div class=" col-md-4" >
                <span style="float: left">当前时间：<span id="nowTime" ></span></span>

            </div>
            <div class="col-md-8" style="text-align: right;">
                <label >开始时间：</label>
                <input type="text" id="startTime" placeholder="开始时间"  autocomplete="off" class="layui-input">
                <label style="padding-left: 20px;">结束时间：</label>
                <input type="text" id="endTime"  autocomplete="off" placeholder="结束时间" class="layui-input">
                <button id="search" class="btn btn-primary " >确定</button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-md-4 col-lg-4  boxDiv">
            <div class="panel panel-blue panel-widget ">
                <div class="row no-padding">
                    <div class="col-sm-3 col-lg-5 widget-left">
                        <em class="glyphicon glyphicon-file glyphicon-l"></em>
                    </div>
                    <div class="col-sm-9 col-lg-7 widget-right">
                        <div class="large" id="orderCount">9999</div>
                        <div class="text-muted"><a href="" style="color: #949494;">订单总数</a></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-md-4 col-lg-4  boxDiv">
            <div class="panel panel-red panel-widget">
                <div class="row no-padding">
                    <div class="col-sm-3 col-lg-5 widget-left">
                        <em class="glyphicon glyphicon-user glyphicon-l"></em>
                    </div>
                    <div class="col-sm-9 col-lg-7 widget-right">
                        <div class="large" id="personCount">9999</div>
                        <div class="text-muted">下单人数</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-md-4 col-lg-4  boxDiv">
            <div class="panel panel-orange panel-widget">
                <div class="row no-padding">
                    <div class="col-sm-3 col-lg-5 widget-left">
                        <em class="glyphicon glyphicon-yen glyphicon-l"></em>
                    </div>
                    <div class="col-sm-9 col-lg-7 widget-right">
                        <div class="large" id="paymentSum">9999</div>
                        <div class="text-muted">成交总金额</div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!--/.row-->

    <!--新增数据统计-->
    <div class="row fadeInUp" style="margin-top: 30px;" id="newUser">
        <div class="col-xs-3 col-md-3 boxDiv">
            <div class="panel panel-default">
                <div class="panel-body easypiechart-panel">
                    <h4><a href="">今日新增用户</a></h4>
                    <div class="easypiechart" id="easypiechart-blue"><span class="percent" id="newUserCount">9999 </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-3 col-md-3 boxDiv" id="userTotalDiv">
            <div class="panel panel-default">
                <div class="panel-body easypiechart-panel">
                    <h4><a href="">总用户数量</a></h4>
                    <div class="easypiechart" id="easypiechart-red"><span class="percent" id="userTotal">9999</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-3 col-md-3 boxDiv" id="newOrder">
            <div class="panel panel-default">
                <div class="panel-body easypiechart-panel">
                    <h4><a href="">今日新增订单</a></h4>
                    <div class="easypiechart" id="easypiechart-orange"><span class="percent" id="newOrderCount">9999</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-3 col-md-3 boxDiv" id="newPrice">
            <div class="panel panel-default">
                <div class="panel-body easypiechart-panel">
                    <h4><a href="">今日成交额</a></h4>
                    <div class="easypiechart" id="easypiechart-teal"><span class="percent" id="newPriceTotal">9999</span>
                    </div>
                </div>
            </div>
        </div>


    </div>


    <!--数据曲线图统计-->
    <div class="row" style="margin-top: 30px;">
        <div class="col-lg-12" >
            <div id="container" style="height: 400px">

            </div>
        </div>

    </div>
</div>
<script src="../static/js/jquery.min.js"></script>
<script src="../static/layui/layui.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/series-label.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/oldie.js"></script>
<script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<script src="../static/js/statistics.js"></script>

</body>

</html>